<template>
  <basePage :show-tabbar="false" :page-params="pageParams">
    <view>
      <view class="search-box">
        <view class="search-border" style="overflow: hidden;">
          <image
            class="imgLeft"
            src="../static/image/icon_search.png"
            mode="aspectFit"
          />
          <view class="imgRight" @click="handleClear">
            <image
              v-if="delFlag"
              src="../static/image/icon_element_close.png"
              mode="aspectFit"
              style="height: 100%; width: 100%;"
            />
          </view>
          <input
            v-model="searchValue"
            class="uni-input"
            confirm-type="search"
            placeholder="搜索商品名称,规格型号,商品编码"
            @confirm="handleSearch"
            @input="onSearchInput"
          >
        </view>
        <view class="search-btn" @click="handleSearch">搜索</view>
      </view>
      <view class="content-box">
        <view class="content-box-title">
          <view>
            <image src="../static/image/shop.png" mode="aspectFit" />
            <text>大兴分公司</text>
          </view>
          <view>
            <text
              v-if="!editorStatus && settleType == 1201"
              class="font-size-color"
              @click="editFn"
            >编辑</text>
            <text
              v-if="editorStatus && settleType == 1201"
              class="font-size-color"
              style="margin-right: 44rpx;"
              @click="cancelEditFn"
            >取消</text>
            <text
              v-if="editorStatus && settleType == 1201"
              class="font-size-color"
              @click="completeFn"
            >完成</text>
          </view>
        </view>
        <OrderProductItem
          :editor-status="editorStatus"
          :order-items-detail-data.sync="orderProductList"
          :order-detail-data="orderDetailData"
          :show-warehouse-label="showWarehouseLabel"
          :view-all-goods-visible="false"
        />
        <view v-show="isLoadMore">
          <uni-load-more
            :status="loadStatus"
            :content-text="contentText"
            :icon-size="14"
          />
        </view>
      </view>
    </view>
  </basePage>
</template>

<script>
import uniLoadMore from '@/goodsPages/uni-load-more/uni-load-more.vue';
import basePage from '@/components/base-page';
import OrderProductItem from '@/components/order-product-list/order-product-item'
import { orderGoodsItems, orderInfoByOrderNo, goodseDitor } from '@/api/payment'
import { checkMemeberStatusFn } from '@/common/common'
export default {
  components: {
    uniLoadMore,
    basePage,
    OrderProductItem
  },
  data() {
    return {
      orderDetailData: {},
      orderProductList: [],
      orderNo: '',
      settleType: '',
      showWarehouseLabel: false, //是否显示仓位标签
      pageParams: {
        state: null,
        emptyTitle: '',
        errorTitle: '',
        showButton: true
      },
      searchValue: '', //搜索字符
      editorFlag: true, //编辑字段显示与隐藏
      finishFlag: false, //完成字段显示与隐藏
      delFlag: false, //搜索框删除图标隐藏与显示
      curOrderProductList: [],
      goodsTotal: '0', //商品总数
      editorStatus: false,
      goodsNum: 1,
      page: 1,
      pagesize: 10,
      loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
      isLoadMore: false, //是否加载中
      contentText: {
        contentdown: '加载更多',
        contentrefresh: '加载中',
        contentnomore: '没有更多'
      }
    }
  },
  watch: {
    orderProductList: {
      handler(newVal) {
        this.curOrderProductList = newVal
      },
      deep: true
    }
  },
  onLoad(option) {
    this.orderNo = option.orderNo
    this.showProductPrice = option.showProductPrice
    this.orderProductListFn()
    this.orderDetail()
  },
  methods: {
    //编辑
    async editFn() {
      if (this.vuex_loginStatus && this.vuex_accountInfo && this.vuex_accountInfo.loginAccount) {
        /*判断当前账号是否是有效账号*/
        const memeberStatus = await checkMemeberStatusFn({ loginAccount: this.vuex_accountInfo.loginAccount })
        if (!memeberStatus) {
          /* uni.redirectTo({
              url: `/login/login/codeLogin`
            })*/
          this.returnLoginFn()
          return
        }
        this.editorStatus = !this.editorStatus
      } else {
        this.returnLoginFn()
      }
    },
    /*未登录跳转登录*/
    returnLoginFn() {
      const branchData = JSON.stringify({
        branchId: this.orderDetailData.branchId,
        branchName: this.orderDetailData.branchName,
      })
      const callbackUrl = `/goodsPages/orderAllgoods`
      const urlParams = JSON.stringify({ orderNo: this.orderDetailData.orderNo, pageSource: 'local' })
      uni.navigateTo({
        url: `../login/login/codeLogin?callbackUrl=${callbackUrl}&urlParams=${urlParams}&registParams=${branchData}`
      })
    },
    //上拉触底函数
    onReachBottom() {
      if (!this.isLoadMore) {
        this.isLoadMore = true
        this.page += 1
        this.orderProductListFn()
      }
    },
    /*监听返回事件*/
    /*onUnload() {
      backPageRefresh()
    },*/
    //点击搜索
    handleSearch() {
      this.orderProductListFn()
    },
    //订单列表
    orderProductListFn() {
      const params = {
        'orderNo': this.orderNo,
        'searchParam': this.searchValue,
        'pageNum': this.page,
        'pageSize': this.pagesize
      }
      orderGoodsItems(params).then((res) => {
        if (res.errorCode != 0) {
          this.setPageParamsFn('ERROR', res.msg)
          return
        }
        // uni.setNavigationBarTitle({
        //   title: '共' + res.data.totalRecord + '件商品'
        // })
        this.setPageParamsFn(null)
        this.$nextTick(() => {
          res.data.result.map((item) => {
            item.oldBuyyerCount = item.buyyerCount
            return item
          })
          if (res.data.result) {
            if (this.page > 1) {
              this.orderProductList = this.orderProductList.concat(res.data.result)
            } else {
              this.orderProductList = res.data.result
              uni.setNavigationBarTitle({
                title: '共' + res.data.totalRecord + '件商品'
              })
            }
            if (res.data.result.length < this.pagesize) {
              this.isLoadMore = true
              this.loadStatus = 'nomore'
            } else {
              this.isLoadMore = false
              this.loadStatus = 'more'
            }
          } else {
            this.isLoadMore = true
            this.loadStatus = 'nomore'
          }
          this.goodsTotal = res.data.totalRecord
          this.$forceUpdate()
        })
      }).catch((res) => {
        this.setPageParamsFn('ERROR', res.msg)
        this.isLoadMore = false
      })
    },
    /*编辑完成*/
    completeFn() {
      const editProductList = []
      this.curOrderProductList.forEach((item) => {
        editProductList.push({
          'newBuyyerCount': item.buyyerCount,
          'oldBuyyerCount': item.oldBuyyerCount,
          'productCode': item.productCode,
          'productId': item.productId
        })
      })
      const params = {
        'editProductList': editProductList,
        'orderNo': this.orderNo,
        'memberId': this.vuex_accountInfo.memberId
      }
      goodseDitor(params).then((res) => {
        if (res.errorCode == 0) {
          this.page = 1
          this.$u.toast('操作成功')
          this.orderProductList = []
          this.orderProductListFn()
          this.orderDetail()
          this.editorStatus = !this.editorStatus
        } else if (res.errorCode == 1 && res.data == 1) {
          this.$u.toast(res.msg)
          this.orderProductListFn()
          this.orderDetail()
        } else {
          this.$u.toast(res.msg)
        }
      })
    },
    /*取消编辑*/
    cancelEditFn() {
      this.$emit('refreshPage')
      this.page = 1
      this.orderProductList = []
      this.orderProductListFn()
      this.editorStatus = !this.editorStatus
    },
    orderDetail() {
      const params = {
        'orderNo': this.orderNo,
      }
      orderInfoByOrderNo(params).then((res) => {
        if (res.errorCode != 0) {
          this.setPageParamsFn('ERROR', res.msg)
          return
        }
        this.setPageParamsFn(null)
        this.$nextTick(() => {
          this.orderDetailData = res.data
          this.settleType = res.data.settleType
          /* 仓位:配方方式为鑫方盛物流、快递、快运-送货上门、快运-站点自提、专车包车时不显示，其他自提类的显示仓位信息
          * 配送方式;10=快递；20=快运-送货上门；21=快运-站点自提；30=专车包车；40=鑫方盛物流；50=上门自提 */
          const sentType = res.data.sentType
          if (sentType != 10 || sentType != 20 || sentType != 21 || sentType != 30 || sentType != 40) {
            this.showWarehouseLabel = true
          }
          this.$forceUpdate()
        })
      }).catch((res) => {
        this.setPageParamsFn('ERROR', res.msg)
      })
    },
    setPageParamsFn(pageType = null, title = '', showButton = true) {
      this.$nextTick(() => {
        this.pageParams.state = pageType
        this.pageParams.emptyTitle = title
        this.pageParams.errorTitle = title
        this.pageParams.showButton = showButton
      })
    },
    editor() {
      this.editorFlag = !this.editorFlag
      this.finishFlag = !this.finishFlag
    },
    // 清除搜索框内容
    handleClear() {
      console.log('点击')
      this.searchValue = ''
      this.page = 1
      this.delFlag = false
      this.orderProductList = []
      this.orderProductListFn()
    },
    onSearchInput(event) {
      if (event.target.value) {
        this.delFlag = true
      } else {
        this.delFlag = false
      }
    },
  },

}
</script>

<style lang="scss">
.search-box {
  width: 100%;
  height: 88rpx;
  background: #ffffff;
  box-shadow: 0 0 20rpx 2rpx rgba(0, 0, 0, 0.02);
  padding-top: 20rpx;
  font-family: PingFangSC-Regular;
  display: flex;
  color: #333333;
}
.search-btn {
  height: 60rpx;
  line-height: 60rpx;
  font-weight: 700;
  font-size: 30rpx;
  padding-top: 8rpx;
}
.search-border {
  overflow: hidden;
  padding-top: 8rpx;
  position: relative;
  width: 650rpx;
  height: 80rpx;
}
.search-border .imgLeft {
  width: 48rpx;
  height: 48rpx;
  background-size: 48rpx 48rpx;
  position: absolute;
  top: 16rpx;
  left: 40rpx;
}
.search-border .imgRight {
  width: 48rpx;
  height: 48rpx;
  background-size: 48rpx 48rpx;
  position: absolute;
  top: 15rpx;
  left: 568rpx;
  z-index: 100;
}
.search-box input {
  font-size: 26rpx;
  min-height: 46rpx;
  width: 540rpx;
  height: 54rpx;
  border: 1rpx solid #f3cf83;
  margin-left: 34rpx;
  margin-right: 20rpx;
  margin-bottom: 24rpx;
  border-radius: 40rpx;
  padding-left: 52rpx;
  padding-top: 6rpx;
  color: #adadad;
}
.content-box {
  width: 670rpx;
  /* height: 632px; */
  background: #ffffff;
  box-shadow: 0 0 20rpx 2rpx rgba(0, 0, 0, 0.02);
  border-radius: 16rpx;
  margin: 20rpx 20rpx;
  padding: 20rpx;
}
.content-box-title {
  display: flex;
  justify-content: space-between;
  font-weight: 400;
  font-size: 26rpx;
  margin-bottom: 34rpx;
}
.content-box-title image {
  width: 30rpx;
  height: 30rpx;
  background-size: 30rpx 30rpx;
  vertical-align: bottom;
}
.font-size-color {
  color:$uni-orange;
  margin-right: 24rpx;
}
.content-list {
  width: 666rpx;
  height: 140rpx;
  margin-top: 26rpx;
  display: flex;
  justify-content: space-between;
}
.content-list-left {
  width: 140rpx;
  height: 140rpx;
  background: silver;
}
.content-list-middle {
  width: 324rpx;
  height: 140rpx;
  margin: 0 20rpx;
}
.content-list-middle-name {
  font-weight: 400;
  font-size: 26rpx;
  height: 72rpx;
}
.content-list-middle-number {
  font-weight: 400;
  font-size: 20rpx;
  color: #999999;
  margin-top: 8rpx;
}
/* .content-list-middle-specification{
	font-weight: 400;
	font-size: 10px;
	color: #999999;
} */
.content-list-right {
  width: 160rpx;
  height: 140rpx;
  text-align: right;
  position: relative;
}
.content-list-right-money {
  font-weight: 400;
  font-size: 20rpx;
}
.content-list-right-number {
  font-weight: 400;
  font-size: 20rpx;
  color: #999999;
}
.content-list-right-depot {
  font-weight: 400;
  font-size: 22rpx;
  color:$uni-orange;
  height: 30rpx;
  border: 1rpx solid $uni-orange;
  margin-top: 48rpx;
  margin-left: 46rpx;
  text-align: center;
}
.content-list-right-editor {
  width: 156rpx;
  height: 40rpx;
  display: flex;
  border-top: 1rpx solid #e7e7e7;
  border-left: 1rpx solid #e7e7e7;
  border-bottom: 1rpx solid #e7e7e7;
  text-align: center;
  position: absolute;
  top: 98rpx;
}
.content-list-right-editor input {
  border-right: 1rpx solid #e7e7e7;
  width: 25%;
}
.font-size-color {
  margin-right: 10rpx;
}
</style>

